<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>超级管理员界面</title>
    <link rel="stylesheet" href="static/css4/bootstrap.min.css">
    <script src="static/jq/jquery.js"></script>
    <script src="static/js4/bootstrap.min.js"></script>
    <style type="text/css">

        html body {
            height: 100%;
            margin: 0;
        }

        .header-logo {
            height: 15%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bg-content {
            min-height: 100%;
            /*margin-bottom:200px;*/
        }

        .bg- {
            background-color: #6495ED;
        }
    </style>

</head>
<body>

<div class="bg-content">
    <div class="header-logo">
        <h1>欢迎来到超级管理员页面</h1>
    </div>
    <nav class="navbar navbar-expand-sm bg- navbar-dark">
        <div class="container">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toSmanagerIndex"
                                        class="nav-link link-light px-2 ">主页</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toShowManager"
                                        class="nav-link link-light px-2" aria-current="page">管理员信息</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toSstushow"
                                        class="nav-link link-light px-2 ">学生信息</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toStuShowMistake"
                                        class="nav-link link-light px-2">学生缺勤信息</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toUpLoad"
                                        class="nav-link link-light px-2 ">数据上传下载</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toUpdates"
                                        class="nav-link link-light px-2 ">修改个人信息</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toUpdates_pw"
                                        class="nav-link link-light px-2">修改密码</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toShowAuthor"
                                        class="nav-link link-light px-2 active">权限管理</a></li>
                <li class="nav-item"><a href="#" class="nav-link link-light px-2 ">About</a></li>
            </ul>
            <ul class="navbar-nav justify-content-end">
                <li class="nav-item"><a href="#" class="nav-link link-light px-2"></a></li>
                <li class="nav-item">
                    <text class="nav-link link-light px-2 " style="color:#000000;"><b>你好，${manager.sname}</b>
                    </text>
                </li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/logout"
                                        class="nav-link link-light px-2 ">退出</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <div class="modal fade" id="manager_add_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">添加管理员权限</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">账号</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="amount" id="add_amount_input"
                                           placeholder="4~14数字">
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="add_name_input" name="name"
                                           readonly>
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <input type="hidden" class="form-control" id="add_cdorm_input" name="cdorm">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">权限</label>
                                <div class="col-sm-10">
                                    <select id="add_statu_input" name="statu">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="manager_save_btn">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="manager_update_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">修改管理员权限</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">账号</label>
                                <div class="col-sm-10">
                                    <p class="form-control-static" id="amount_update_static"></p>
                                    <input type="hidden" class="form-control" id="update_amount_input" name="amount">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="update_name_input" name="name"
                                           placeholder="1~7个汉字" readonly>
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">宿舍楼</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="update_cdorm_input" name="cdorm" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">权限</label>
                                <div class="col-sm-10">
                                    <select id="update_statu_input" name="statu">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="0">0</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="manager_update_btn">更新</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-4">
                    <form class="form-inline">
                        <div class="form-group">
                            <select id="selectManager" name="select_value" class="form-control">
                                <option value="1">全部</option>
                                <option value="2">姓名</option>
                                <option value="3">宿舍楼</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <input id="search" type="hidden" name="find_value" class="form-control" placeholder="查询内容">
                        </div>
                        <button id="define" type="button" class="btn btn-default">查询</button>
                    </form>
                </div>
                <div class="col-md-4 col-md-offset-8">
                    <button class="btn btn-primary" id="add_manager_modal_btn">新增</button>
                    <button class="btn btn-danger" id="delete_manager">删除</button>
                </div>
            </div>
            <%--        表格--%>
            <div class="row">
                <table class="table table-hover" id="manager_table">
                    <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="check"/>
                        </th>
                        <th>账号</th>
                        <th>姓名</th>
                        <th>宿舍楼</th>
                        <th>权限</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <%--        分页条--%>
            <div class="row">
                <div class="col-md-6" id="page_info_area"></div>
                <div class="col-md-4" id="page_area"></div>
                <div class="col-md-2" id="onclick_page"></div>
            </div>
        </div>
        <script type="text/javascript">
            var totalRecord;
            var pageNumRecord;
            var selectManager = $("#selectManager").val();
            var va = $("#Search").val();

            $(function () {
                goto_page(1, selectManager, va);
            });

            //下拉列表
            $("#selectManager").change(function () {
                selectManager = $("#selectManager").val();
                if (selectManager == 1) {
                    $("#search").prop("type", "hidden");
                } else {
                    $("#search").prop("type", "text");
                }
            });


            //对应查询管理员信息
            $("#define").click(function () {
                selectManager = $("#selectManager").val();
                va = $("#search").val();

                if ($("#search").prop("type") == "hidden") {
                    va = "";
                } else {
                    va = $("#search").val();
                }
                $.ajax({
                    url: "${pageContext.request.contextPath}/showAuthor",
                    data: "pn=" + 1 + "&select_value=" + selectManager + "&find_value=" + va,
                    type: "get",
                    success: function (result) {
                        //1.解析并显示员工数据
                        build_manager_table(result);
                        //2.解析并显示分页信息
                        page_info_area(result);
                        build_page_nav(result);
                        to_page(result);

                    }
                });
                // return false;
            });

            //ajax请求，要到分页数据
            function goto_page(pn, selectManager, va) {
                $("#check").prop("checked", false);
                $.ajax({
                    url: "${pageContext.request.contextPath}/showAuthor",
                    data: "pn=" + pn + "&select_value=" + selectManager + "&find_value=" + va,
                    type: "get",
                    success: function (result) {
                        $("#selectManager").val(result.extend.selectvalue);
                        va = (result.extend.find_v == "undefined" ? "" : result.extend.find_v);
                        console.log(result);
                        // 1.解析并显示员工数据
                        build_manager_table(result);
                        // 2.解析并显示分页信息
                        page_info_area(result);
                        build_page_nav(result);
                        to_page(result);
                    }
                });
            }

            function build_manager_table(result) {
                $("#manager_table tbody").empty();
                var managers = result.extend.pageInfo.list;
                $.each(managers, function (index, manager) {
                    var checkbox = $("<td><input type='checkbox' class='check_item' /></td>");
                    var manager_amount = $("<td></td>").append(manager.amount).attr("amount_value", manager.amount);
                    // var manager_password = $("<td></td>").append(manager.password);
                    var manager_name = $("<td></td>").append(manager.name);
                    var manager_cdorm = $("<td></td>").append(manager.cdorm);
                    var manager_statu = $("<td></td>").append(manager.statu);
                    //append方法执行后还是返回原来的元素
                    var edit_btn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append("编辑");
                    var del_btn = $("<button></button>").addClass("btn btn-danger btn-sm del_btn").append("删除");

                    var btn_td = $("<td></td>").append(edit_btn).append("&nbsp; | &nbsp;").append(del_btn);
                    $("<tr></tr>").append(checkbox).append(manager_amount).append(manager_name)
                        .append(manager_cdorm).append(manager_statu)
                        .append(btn_td).appendTo("#manager_table tbody");
                });
            }

            function page_info_area(result) {
                totalRecord = result.extend.pageInfo.total;
                pageNumRecord = result.extend.pageInfo.pageNum;
                $("#page_info_area").empty();
                $("#page_info_area").append("当前为" + result.extend.pageInfo.pageNum + "页数，总共" + result.extend.pageInfo.pages + "页，总共" + result.extend.pageInfo.total + "条记录");
            }

            function build_page_nav(result) {

                $("#page_area").empty();
                var ul = $("<ul></ul>").addClass("pagination");
                var first_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").append("首页"));
                if (result.extend.pageInfo.pageNum != 1) {
                    first_page.click(function () {
                        goto_page(1, selectManager, va);
                    })
                }
                var pre_page = $("<li></li>").addClass("page-item").append($("<a></a>").addClass("page-link").append("&laquo;"));
                if (result.extend.pageInfo.hasPreviousPage == true) {
                    pre_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").attr("aria-label", "Previous").append("&laquo;"));
                    pre_page.click(function () {
                        var num = result.extend.pageInfo.pageNum - 1;
                        goto_page(num, selectManager, va);
                    });
                } else {
                    pre_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").attr("aria-label", "Previous").append("&laquo;"));
                }
                var next_page = $("<li></li>").append($("<a></a>").append("&raquo;"));

                if (result.extend.pageInfo.hasNextPage == true) {
                    next_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").attr("aria-label", "Next").append("&raquo;"));
                    next_page.click(function () {
                        var num = result.extend.pageInfo.pageNum + 1;
                        goto_page(num, selectManager, va);
                    });
                } else {
                    next_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").attr("aria-label", "Next").append("&raquo;"));
                }
                var last_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").append("末页"));
                if (result.extend.pageInfo.pageNum != result.extend.pageInfo.pages) {
                    last_page.click(function () {
                        goto_page(result.extend.pageInfo.pages, selectManager, va);
                    });
                }
                ul.append(first_page).append(pre_page);
                $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
                    var num_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").append(item));
                    if (result.extend.pageInfo.pageNum == item) {
                        num_page.addClass("active")
                    }
                    num_page.click(function () {
                        // goto_page(item);
                        goto_page(item, selectManager, va);
                    });
                    ul.append(num_page);
                });
                ul.append(next_page).append(last_page);
                var nav = $("<nav></nav>").attr("aria-label", "Page navigation example").append(ul);
                $("#page_area").append(nav);
            }

            function to_page(result) {
                $("#onclick_page").empty();
                var input = $("<input>").addClass("number col-md-6").attr("type", "number").attr("id", "number").attr("name", "pn").attr("placeholder", "跳转");
                var btn = $("<button></button>").addClass("btn btn-primary btn-sm col-md-4").append("确定");
                btn.click(function () {
                    var num = $(".number").val();
                    if (num < 1) {
                        goto_page(1, selectManager, va);
                    } else if (num > result.extend.pageInfo.pages) {
                        goto_page(result.extend.pageInfo.pages, va);
                    } else {
                        goto_page(num, selectManager, va);
                    }
                });
                $("#onclick_page").append(input).append("&nbsp;").append(btn);
            }

            //完整重置表单
            function form_set(ele) {
                $(ele)[0].reset();
                $(ele).find("*").removeClass("has-error has-success");
                $(ele).find(".help-block").text("");
            }

            //弹出模态框
            $("#add_manager_modal_btn").click(function () {
                form_set("#manager_add_modal form");
                show_validate_msg("#add_amount_input", "", "");
                $("#manager_add_modal").modal({
                    backdrop: "static"
                });
            });

            //校验
            function validate_add_form() {
                var name = $("#add_name_input").val();
                var regName = /^[\u4e00-\u9fa5]{1,7}$/;
                var amount = $("#add_amount_input").val();
                var regAmount = /^[0-9]{4,14}$/;
                var password = $("#add_password_input").val();
                var regPassword = /^[a-zA-Z0-9]{6,12}$/;

                if (!regAmount.test(amount)) {
                    show_validate_msg("#add_amount_input", "error", "账号应为4~14数字")
                    return false
                } else {
                    show_validate_msg("#add_amount_input", "success", "")
                    $.ajax({
                        url: "${pageContext.request.contextPath}/checkManager",
                        type: "POST",
                        data: "amount=" + amount,
                        success: function (result) {
                            if (result.code == 100) {
                                show_validate_msg("#add_amount_input", "success", "");
                                $("#manager_save_btn").attr("ajax-va", "success");
                            } else if (result.code == 200) {
                                show_validate_msg("#add_amount_input", "error", "账号不可用");
                                $("#manager_save_btn").attr("ajax-va", "error");
                            }
                        }
                    });
                }
                if (!regPassword.test(password)) {
                    show_validate_msg("#add_password_input", "error", "密码应为6~12字母或数字");
                    return false;
                } else {
                    show_validate_msg("#add_password_input", "success", "");
                }
                if (!regName.test(name)) {
                    show_validate_msg("#add_name_input", "error", "姓名应为1~7汉字");
                    return false;
                } else {
                    show_validate_msg("#add_name_input", "success", "")
                }
                return true;
            }

            function show_validate_msg(ele, status, msg) {
                $(ele).parent().removeClass("has-success has-error");
                $(ele).next("span").text("");
                if ("success" == status) {
                    $(ele).parent().addClass("has-success");
                    $(ele).next("span").text(msg);
                } else if ("error" == status) {
                    $(ele).parent().addClass("has-error");
                    $(ele).next("span").text(msg);
                }
            }



            $("#add_amount_input").change(function () {
                var amount = this.value;
                $.ajax({
                    url: "${pageContext.request.contextPath}/checkManager",
                    type: "POST",
                    data: "amount=" + amount,
                    success: function (result) {
                        if (result.code == 200) {
                            show_validate_msg("#add_amount_input", "error", result.extend.va_msg);
                            $("#manager_save_btn").attr("ajax-va", "error");
                        } else if (result.code == 100) {
                            show_validate_msg("#add_amount_input", "success", result.extend.va_msg);
                            $("#manager_save_btn").attr("ajax-va", "success");
                        }
                    }
                });
            });

            $("#add_amount_input").keyup(function (event) {
                var amount = $("#add_amount_input").val();
                if(event.keyCode==13){
                    if(amount=='' || amount==null){
                        alert("账号不能为空！")
                        return;
                    }
                    $.ajax({
                        url:"${pageContext.request.contextPath}/getManagerAmount",
                        type:"POST",
                        data:"amount="+amount,
                        success:function(result){
                            if(result.code == 100){
                                $("#add_name_input").val(result.extend.author.name);
                                $("#add_cdorm_input").val(result.extend.author.cdorm);
                            }else if(result.code ==200){
                                alert(result.extend.msg);
                            }
                        }
                    });
                }
            });

            $("#manager_save_btn").click(function () {
                // alert($("#add_statu_input").val());
                $.ajax({
                    url: "${pageContext.request.contextPath}/addAuthor",
                    type: "POST",
                    data: $("#manager_add_modal form").serialize(),
                    success: function (result) {
                        if (result.code == 100) {
                            $("#manager_add_modal").modal("hide");
                            goto_page(totalRecord, selectManager, va);
                        } else if(result.code == 200){
                            alert(result.extend.msg)
                            console.log(result);
                        }
                    }
                });
            });
            //修改管理员信息
            $(document).on("click", ".edit_btn", function () {
                var amount = $(this).parents("td").parents("tr").find("td:eq(1)").attr("amount_value");
                getManager(amount);
                $("#manager_update_modal").modal({
                    backdrop: "static",
                });
            });

            //获取信息
            function getManager(amount) {
                $.ajax({
                    url: "${pageContext.request.contextPath}/getAuthorAmount",
                    type: "POST",
                    data: "amount=" + amount,
                    success: function (result) {
                        console.log(result.extend.author);
                        if(result.code==100){
                            var amount = result.extend.author[0].amount;
                            var name = result.extend.author[0].name;
                            var cdorm = result.extend.author[0].cdorm;
                            var statu = result.extend.author[0].statu;
                            $("#amount_update_static").text(amount);
                            $("#update_name_input").val(name);
                            $("#update_cdorm_input").val(cdorm);
                            $("#update_statu_input").val(statu);
                        }else if(result.code==200){
                            alert(result.extend.msg);
                        }
                    }
                });
            }

            //点击保存修改信息
            $("#manager_update_btn").click(function () {
                var name = $("#update_name_input").val();
                var regName = /^[\u4e00-\u9fa5]{1,7}$/;
                var password = $("#update_password_input").val();
                var regPassword = /^[a-zA-Z0-9]{6,12}$/;

                if (!regName.test(name)) {
                    show_validate_msg("#update_name_input", "error", "姓名应为1~7个汉字")
                    return false;
                } else {
                    show_validate_msg("#update_name_input", "success", "")
                }
                if (!regPassword.test(password)) {
                    show_validate_msg("#update_password_input", "error", "密码范围在6~14位数字或字母")
                    return false;
                } else {
                    show_validate_msg("#update_password_input", "success", "")
                }
                var amount = $("#amount_update_static").text();

                if ($("#update_cdorm_input").val() == "") {
                    $("#update_cdorm_input").val("0");
                }
                if ($("#update_address_input").val() == "") {
                    $("#update_address_input").val("0");
                }
                if ($("#update_id_input").val() == "") {
                    $("#update_id_input").val("0");
                }
                if ($("#update_phone_input").val() == "") {
                    $("#update_phone_input").val("0");
                }
                if ($("#update_age_input").val() == "") {
                    $("#update_age_input").val("0")
                }
                $("#update_amount_input").prop("value", amount);
                if (confirm("确认要修改【" + amount + "】吗？")) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/authorUpdate",
                        type: "POST",
                        data: $("#manager_update_modal form").serialize(),
                        success: function (result) {
                            if (result.code == 100) {
                                $("#manager_update_modal").modal("hide");
                                goto_page(pageNumRecord, selectManager, va);
                            } else {
                                console.log("输入的数据过长");
                            }
                        }
                    });
                }
            });
            //单个删除
            $(document).on("click", ".del_btn", function () {
                //弹出是否删除对话框
                // alert($(this).parents("tr").find("td:eq(1)").text());
                var amount = $(this).parents("tr").find("td:eq(1)").text();
                if(amount=='' || amount==null){
                    alert("删除的结果不能空");
                    return;
                }
                if (confirm("确认删除" + amount + "吗")) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/authorDel",
                        type: "POST",
                        data: "amount=" + amount,
                        success: function (result) {
                            alert(result.msg);
                            goto_page(pageNumRecord, selectManager, va);
                        }
                    });
                }
            });
            //多个删除
            $("#check").click(function () {

                $(".check_item").prop("checked", $(this).prop("checked"));
            });
            //全选
            $(document).on("click", ".check_item", function () {
                var flag = $(".check_item:checked").length == $(".check_item").length;
                $("#check").prop("checked", flag);
            });
            //删除选中信息
            $("#delete_manager").click(function () {
                var name = "";
                var amount = "";
                $.each($(".check_item:checked"), function () {
                    name += $(this).parents("tr").find("td:eq(2)").text() + ",";
                    amount += $(this).parents("tr").find("td:eq(1)").text() + "-";
                })
                name = name.substring(0, name.length - 1);
                amount = amount.substring(0, amount.length - 1);
                if (confirm("确认删除【" + name + "】吗？")) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/authorDel",
                        type: "POST",
                        data: "amount=" + amount,
                        success: function (result) {
                            alert(result.msg);
                            goto_page(pageNumRecord, selectManager, va);
                        }
                    });
                }
            });
        </script>
    </div>
</div>
<div style="background-color:#fff; height:20px;margin-bottom:0px"></div>
<footer class="footer" style="background-color:#F6F7F8; height:60px;margin-bottom:0px">
    <div class="container text-center">
        <p style="text-align: center;color: #777">
            copy© 2022-2022 舒崇 版权所有
            <br><br>
        </p>
    </div>
    <div id="gotop" style="display: block;"><a class="gotop" draggable="false"></a></div>
</footer>
</body>
</html>
